<template>
  <div class="drag-box" v-drag id="drag" v-if="isShow">
    <app-main v-if="isShow" @doQuit="doQuit()"></app-main>
  </div>
</template>

<script>

import {EventBus} from '@/common/vue/event-bus.js';
import userChatViewModel from '@/platform/vue/view/model/UserChatViewModel';
import { setup,state } from "./state";

export default {
  name: "PrivateVideo",

  components: {
    AppMain: () =>
        import("@/views/module/video/app-main.vue")
  },
  mounted() {
    EventBus.$on("callVideo", (roomId) => {
      this.model.videCall({});
    });

    EventBus.$on("video", (roomId) => {
      this.isShow = true;
      console.log("接受到房间id"+roomId);
      state.room=roomId;
    });
    EventBus.$on("joinRoom", (roomId) => {
      // console.log("接受到房间id"+roomId);
      // state.room=roomId;
      // this.isShow = isShow;
    });

  },
  data() {
    return {
      isShow: false,
      model: userChatViewModel
    }
  },
  methods: {
    doQuit() {
      this.isShow = false;
    }
  },


  //自定义指令
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let oDiv = el;  // 获取当前元素
        oDiv.onmousedown = (e) => {
          console.log('onmousedown')
          // 算出鼠标相对元素的位置
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;

          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;

            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';

          };

          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.drag-box {
  z-index: 300;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 500px;
  height: 500px;
  border-radius: 5px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .15);
  background-color: rgba(100, 200, 10, 0.5);
}

</style>
